<template>
  <div class="yi-taskpage-main guanwang-bg" style="height: calc(100vh - 124px);border-radius: 10px"
       @scroll="scrollCont">
    <div :style="{paddingTop:100 * (10 / screensStore.bodyHeight) + 'vh',
    paddingLeft:100 * (10 / screensStore.bodyWidth) + 'vw',paddingRight:100 * (10 / screensStore.bodyWidth) + 'vw',
    marginBottom:100 * (10 / screensStore.bodyHeight) + 'vh'}"
    >
      <div style="width: 100%;display: flex;justify-content: start;margin-bottom: 10px">
        <el-button type="primary" round size="default" @click="callTaskPageDetail"><el-icon style="margin-right: 5px"><Back /></el-icon>返回</el-button>
      </div>
      <template v-if="isEmpty">
        <el-row :gutter="56">
          <!--      带循环体-->
          <el-col :span="5.5" v-for="item in tableList" :key="item.id" style="margin-bottom: 15px">
            <div style="cursor: pointer" class="hover-big-size">
              <div style="width: 100%;background: rgb(0,188,156);border-top-left-radius: 5px;
      border-top-right-radius: 5px">
                <div class="fixed-row" style="padding: 10px">
                  <div class="text-label" style="color: #fff">被访网点名称：</div>
                  <div style="flex: 1;color: #fff" class="text-label2">{{item.outletsName}}</div>
                </div>
              </div>
              <div style="width: 100%;min-height: 180px;background: linear-gradient(to right, white, #e0f7fa);padding: 10px;display: flex;flex-direction: column;
        justify-content: space-between;border-bottom-left-radius: 5px;border-bottom-right-radius: 5px">
                <div class="fixed-row">
                  <div class="text-label">审核状态：</div>
                  <div style="flex: 1" class="text-label2">
                    <el-tag
                      v-if="item.state == '审核中'"
                      type="warning"
                      effect="dark"
                    >
                      {{ item.state }}
                    </el-tag>
                    <el-tag
                      v-if="item.state == '审核通过'"
                      type="success"
                      effect="dark"
                    >
                      {{ item.state }}
                    </el-tag>
                    <el-tag
                      v-if="item.state == '审核拒绝'"
                      type="danger"
                      effect="dark"
                    >
                      {{ item.state }}
                    </el-tag>
                  </div>
                </div>
<!--                <div class="fixed-row">-->
<!--                  <div class="text-label" style="align-self: flex-start">被访网点地址：</div>-->
<!--                  <div style="flex: 1" class="text-label2">{{item.provinceName + item.cityName + item.areaName + item.address}}</div>-->
<!--                </div>-->
                <div class="fixed-row">
                  <div class="text-label">开始时间：</div>
                  <div style="flex: 1" class="text-label2">{{item.planStartTime}}</div>
                </div>
                <div class="fixed-row">
                  <div class="text-label">结束时间：</div>
                  <div style="flex: 1" class="text-label2">{{item.planEndTime}}</div>
                </div>
<!--                <div class="fixed-row">-->
<!--                  <div class="text-label">费用：</div>-->
<!--                  <div style="flex: 1;color: #f52222" class="text-label2">{{item.cost}} 元</div>-->
<!--                </div>-->
<!--                <div class="fixed-row">-->
<!--                  <div class="text-label">交通补贴：</div>-->
<!--                  <div style="flex: 1;color: #f52222" class="text-label2">{{item.subsidy}} 元</div>-->
<!--                </div>-->
                <div class="fixed-row" style="justify-content: flex-end">
                  <div>
                    <el-button
                      type="primary"
                      size="mini" round
                      @click="toPlanvisit(item)"
                      v-if="item.state == '审核通过'"
                    >
                      执行任务
                    </el-button>
                    <el-button
                      type="danger"
                      size="mini" round
                      @click="viewJujue(item)"
                      v-if="item.state == '审核拒绝'"
                    >
                      查看拒绝原因
                    </el-button>
                  </div>
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
      </template>
      <template v-else>
        <el-empty description="暂无任务" />
      </template>
    </div>
  </div>
</template>

<script setup lang="ts">
  import {useRouter} from 'vue-router'
  import { screenStore } from '~/stores/modules/screen'
  import { yiGetTaskPage } from '~/api/taskpage'
  import {getItem} from '@/utils/index'
  const screensStore = screenStore()
  const router = useRouter()
  const paging = reactive({
    current:1,
    size:20,
    total:0,
  })
  const isEmpty = ref(false)
  onMounted(()=>{
    paging.current = 1
    tableList.value = []
    getTablelist()
  })
  const tableList = ref([])
  const getTablelist = () => {
    const params = {
      current:paging.current,
      size:paging.size,
      brandId:getItem('pinpaiId'),
    }
    yiGetTaskPage(params).then(res => {
      if(res.code == 200){
        tableList.value = [...tableList.value,...res.data.records]
        paging.total = res.data.total
        if(paging.total == 0){
          isEmpty.value = false
        }
        else{
          isEmpty.value = true
        }
      }
      else{
        tableList.value = []
        paging.total = 0
        isEmpty.value = false
      }
    })
  }

  const scrollCont = (e) => {
    if(e.target.offsetHeight - (e.target.scrollTop - 150) <= 100){
      if(paging.current * paging.size < paging.total){
        paging.current = paging.current + 1
        getTablelist()
      }
    }
  }

  const toPlanvisit = (item) => {
    const data = {
      ...item
    }
    ElMessageBox.confirm(
      '是否确认去执行当前任务',
      '提示',
      {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      }
    )
      .then(() => {
        screensStore.activeHomeNav = '访问计划'
        router.replace({path:'/planvisit',query:{periodId:item.periodId}})
      })
  }


  const callTaskPageDetail = () => {
    router.back()
  }
  const viewJujue = (row) => {
    ElMessageBox.alert(`${row.reason}`, '拒绝原因', {
      confirmButtonText: '确认',
    })
  }
</script>

<style scoped>
    .taskpage-main{
        overflow-y: auto;
    }
    .hover-big-size:hover{
        transform: translateY(-5px) scale(1.02);
        transition: all 0.5s;
    }
</style>
